<template>
	<view>

		<div class="layui-form-select" :class="list.length > 0 ? 'layui-form-selected' : ''">
			
			<div class="layui-select-title" @click="showPanel = !showPanel">
				<input type="text" :focus="showPanel" @blur="blured" @input="toSearch" @confirm="confirmed" class="layui-input" v-if="showPanel || !curValue" placeholder="输入关键字进行搜索">
				<input :value="curTitle" type="text" class="layui-input" v-if="!!curValue && showPanel == false " style="color: #000;">
				<i class="layui-icon layui-icon-search"></i>
			</div>
			
			<dl class="layui-anim layui-anim-upbit" style="" v-if="list.length > 0" >
				<dd v-for="( item , index) in list" :key="index" @click="selected(index)" :class=" item[valueKey] == curValue ?'layui-this':''">
					{{item[titleKey]}}
				</dd>
			</dl>
		</div>

		<input type="text" :value="curValue" :name="name" style="display: none;">
	</view>
</template>

<script>
	import kit from "../common/kit.js" ;
	export default {
		name: "searchList",
		props: {
			name: {
				type: String,
				default: ''
			},
			value: {
				type: [String, Number,Array,Object],
				default: ''
			},
			title: {
				type: [String, Number,Array,Object],
				default: ''
			},
			
			url : { //搜索地址
				type: String,
				default: ''
			},
			
			searchKey: { //搜索文字
				type: String,
				default: 'keywords'
			},
			
			resultKey: { //搜索结果
				type: String,
				default: 'list'
			},
			titleKey : { //说明文字的主键
				type: String,
				default: 'title'
			},
			valueKey : { //值的主键
				type: String,
				default: 'value'
			},
			
			maxShowCount : { //最多显示的数据条数
				type : [String,Number] ,
				default : 10 
			}
		},

		created() {
			this.setDefaultValue();
		},

		watch: {
			value: function() {
				this.setDefaultValue();
			}
		},

		data() {
			return {
				curValue : '' ,
				curTitle : '' ,
				showPanel : false ,
				list : []
			};
		},

		methods: {
			
			confirmed:function(e){
				this.showPanel = false ;
			},
			
			toSearch : function(e){
				var key = e.detail.value ;
				if (!key) {
					this.list = [] ;
					return false;
				}
				var that = this ;
				var data = {} ;
				data[this.searchKey] = key ;
				kit.get( this.url ,data,function(res){
					that.list = res[that.resultKey] ;	
				});
			},
			
			blured:function(e){
				this.showPanel = false ;
			},
			
			selected: function(index) {
				var cur = this.list[index] ;
				this.curValue = cur[this.valueKey] ;
				this.curTitle = cur[this.titleKey] ;
				this.list = [] ;
				this.showPanel = false ;
				this.$emit("selected", this.curValue);
			},
			setDefaultValue: function(e) {
				this.curValue = this.value;
				this.curTitle = this.title ;
			}
		}
	}
</script>

<style scoped lang="scss">
.layui-select-title{
	cursor: pointer;
	.layui-icon{
		position: absolute;
		right: 9px;
		top: 7px;
		font-size: 19px;
		z-index: 2;
		cursor: pointer;
	}
}
</style>
